import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)
// 引入cookie
import { getCookie } from '@/utils/cookie'
// 引入角色接口
import { getPress } from '@/http/http'
// 引入 store 实例对象
import store from '@/store'

// 该段代码不需要记，理解即可
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch((err) => err);
};

let routes = [
    { path: '/', redirect: '/layout' },
    {
        path: '/layout',
        component: () => import('@/views/layout/layout'), // 懒加载方式
        name: 'layout',
        children: [ // 这个是首页左侧导航对应的公共的菜单
            {
                path: "",
                component: () => import('@/views/home/Home'),
                name: 'Home',
                meta: {
                    title: "首页",
                    icon: 'el-icon-attract'
                }
            },
            {
                path: 'user',
                name: 'User',
                component: () => import('@/views/user/User.vue'),
                meta: {
                    title: '用户管理',
                    icon: 'el-icon-coordinate'
                }
            },
            {
                path: 'msg',   // 信息管理功能
                name: 'Msg',
                component: () => import('@/views/msg/Msg.vue'),
                meta: {
                    title: '信息管理功能',
                    icon: 'el-icon-wallet'
                },
                children: [
                    {
                        path: 'mymsg',   //个人信息
                        name: 'Mymsg',
                        component: () => import('@/views/msg/Mymsg.vue'),
                        meta: {
                            title: '个人信息',
                            icon: 'el-icon-set-up'
                        },
                    }
                ]
            }
        ]
    },
    {
        path: "/login",
        component: () => import('@/views/Login.vue')
    }
]

const router = new VueRouter({
    mode: "history",
    routes
})

//全局前置守卫
router.beforeEach((to, from, next) => {
    // 获取token 
    // /layout
    let token = getCookie('token')
    console.log(token);
    if (token) {
        // 在此处获取左侧权限菜单

        // 获取角色role
        let role = localStorage.getItem('role')
        console.log(role);
        if (store.state.routes.length == 0) {
            // 请求路由角色接口
            getPress({ role: role }).then(res => {
                // console.log(33, res);
                if (res.code == 200) {
                    res.data.forEach((item) => {
                        item.component = () => import('@/views/' + item.path + '/' + item.name)
                        routes[1].children.push(item)
                    })
                    // console.log('添加完后的路由', routes);
                    console.log(99, router);

                    // 将修改完的routes 赋值给vuex 全局变量routes
                    store.dispatch('setRoleAction', routes).then(() => {
                        router.addRoutes(routes) //动态添加路由
                        //在addRoutes()之后第一次访问被添加的路由会白屏，这是因为刚刚addRoutes()就立刻访问被添加的路由，然而此时addRoutes()没有执行结束，
                        // 因而找不到刚刚被添加的路由导致白屏。因此需要从新访问一次路由才行。
                        next({ ...to, replace: true }) //解决动态添加路由白屏问题  bug
                    })

                    // console.log(88, store.state.routes);
                }
            })
        } else {
            next() // 有路由菜单直接放行
        }

    } else if (!token && to.path != '/login') {
        // 用户未登录   
        next('/login')
    } else {
        next()
    }
})



export default router